<template>
	<view class="wrapper feedback">
		<view class="feedback-tab">
			<u-tabs
				lineColor="#e3230e"
				lineWidth="90rpx"
				:itemStyle="{
					height: '80rpx',
					fontSize: '32rpx'
				}"
				:inactiveStyle="{
					color: '#333333'
				}"
				:activeStyle="{
					color: '#e3230e',
					fontWeight: '600'
				}"
				:scrollable="false"
				:list="tabList"
				@click="clickTab"></u-tabs>
		</view>
		<view class="feedback-content">
			<view class="feedback-list">
				<view class="feedback-item" v-for="item in tableList" :key="item.id">
					<view class="feedback-item-top">
						<view class="feedback-item-other main-flex">
							<view class="feedback-item-time">{{item.createTime}}</view>
							<view class="feedback-item-status">
								<text v-if="item.replyFlag === 1" style="color: #e3230e;">反馈已解决</text>
								<text v-else>反馈待回复</text>
							</view>
						</view>
						<view class="feedback-item-text">{{item.advice}}</view>
						<view class="feedback-item-img" v-if="item.adviceImg">
							<u-album :urls="adviceImgList(item.adviceImg)"></u-album>
						</view>
					</view>
					<view class="feedback-item-reply" v-if="item.replyFlag === 1">
						<view class="feedback-item-reply-t main-flex">
							<image class="feedback-item-reply-icon" src="/static/images/icon/service_icon.png"></image>
							<text class="feedback-item-reply-name">系统回复</text>
							<text class="feedback-item-reply-time">{{item.updateTime}}</text>
						</view>
						<view class="feedback-item-reply-content">{{item.reply}}</view>
					</view>
				</view>
			</view>
			<!--加载-->
			<view
				v-if="isNull"
				class="null main-flex">
				<u-empty text="数据为空" icon="/static/images/null.png"></u-empty>
			</view>
			<view
				v-else
				class="more main-flex">
				<uni-load-more :status="status" />
			</view>
		</view>
	</view>
</template>

<script setup>
import { computed, ref, watch } from 'vue';
import { onReady, onLoad, onReachBottom, onShow, onHide } from '@dcloudio/uni-app';
import useUserStore from '@/store/modules/user'
import useSetStore from '@/store/modules/set'
import { throttle, debounce } from '@/uni_modules/uview-plus'
import modal from '@/plugins/modal'
import { adviceList } from "@/api/app_api/user"

	const userStore = useUserStore()
	const setStore = useSetStore()
	
	// tabs
	const tabList = ref([
		{ type: 0, name: '待回复' },
		{ type: 1, name: '已解决' }
	])
	const clickTab = (e) => {
		type.value = e.type
		searchFirst()
	}
	
	// 列表查询
	const type = ref(0)
	const tableList = ref([])
	const isLoading = ref(false)
	const status = ref('more')
	const isNull = ref(false)
	
	const searchFirst = () => {
		tableList.value = []
		status.value = 'loading'
		isNull.value = false
		getList()
	}
	
	const getList = () => {
		isLoading.value = true
		// uni.showLoading({
		// 	title: '数据加载中...'
		// })
		adviceList({
			type: type.value
		}).then(res => {
			tableList.value = res.data || []
			status.value = 'no-more'
			isNull.value = tableList.value.length === 0
			isLoading.value = false
			// uni.hideLoading()
		}).catch(() => {
			isLoading.value = false
			isNull.value = false
			// uni.hideLoading()
		})
	}
	
	// 图片显示
	const adviceImgList = (imgs) => {
		return imgs ? imgs.split(',').filter(item => item) : []
	}
	
	onLoad(() => {
		searchFirst()
	})
	
</script>

<style lang="scss">
	.feedback {
		&-tab {
			position: fixed;
			height: 80rpx;
			width: 100%;
			left: 0;
			background-color: #ffffff;
		}
		&-content {
			padding: 100rpx 20rpx 20rpx;
		}
		&-list {
			
		}
		&-item {
			border-radius: 20rpx;
			background-color: #ffffff;
			padding: 0rpx 20rpx;
			&+.feedback-item {
				margin-top: 20rpx;
			}
			&-top {
				padding: 20rpx 0;
			}
			&-time {
				font-size: 26rpx;
				color: $text-light;
			}
			&-status {
				font-size: 26rpx;
				margin-left: auto;
			}
			&-text {
				font-size: 28rpx;
				margin-top: 20rpx;
			}
			&-img {
				margin-top: 20rpx;
			}
			&-reply {
				border-top: 1px solid $line-color;
				padding: 20rpx 0;
				&-icon {
					width: 40rpx;
					height: 40rpx;
				}
				&-name {
					font-size: 28rpx;
					margin-left: 20rpx;
				}
				&-time {
					margin-left: auto;
					font-size: 26rpx;
					color: $text-light;
				}
				&-content {
					margin-top: 20rpx;
					background-color: #f8f8f8;
					border-radius: 20rpx;
					padding: 20rpx;
					font-size: 28rpx;
				}
			}
		}
	}
</style>
